<template>
  <div>
    <modal-header :right="title" @back="close" />
    <div class="content-padding">
      <a-row class="see_row" style="width: 60%;">
        <a-form-model ref="ruleForm" class="ant-advanced-form" :model="data" :rules="rules"
          :labelCol="{ style: 'width:108px' }">
          <a-col :span="12">
            <a-form-model-item label="设备号" prop="deviceNo" class="form-w-95" :colon="false">
              <a-input style="width:278px;" :disabled="flag" :maxLength="15" v-model.trim="data.deviceNo"
                placeholder="请输入设备号" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="ICCID" prop="iccid" class="form-w-95" :colon="false">
              <a-input style="width:278px;" v-model.trim="data.iccid" placeholder="请输入ICCID" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备品牌" prop="brandId">
              <a-select style="width:278px;" class="form-w-95" placeholder="请选择品牌" allowClear @change="changeDevice"
                v-model="data.brandId">
                <a-select-option v-for="(item, i) in brandOptions" :key="i" :value="item.id">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备型号" prop="modelId">
              <a-select style="width:278px;" class="form-w-95" placeholder="请选择型号" allowClear v-model="data.modelId">
                <a-select-option v-for="(item, i) in deviceOptions" :key="i" :value="item.id">{{ item.modelName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备卡类型" prop="simCardType" class="form-w-95" :colon="false">
              <a-input style="width:278px;" :maxLength="15" v-model.trim="data.simCardType" placeholder="请输入设备卡类型" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" v-if="data.brandId===1003">
            <a-form-model-item label="SN号" prop="snNo" class="form-w-95" :colon="false">
              <a-input style="width:278px;" v-model.trim="data.snNo" placeholder="请输入SN号" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="SIM卡号" prop="simCardNo" class="form-w-95" :colon="false">
              <a-input style="width:278px;" v-model.trim="data.simCardNo" placeholder="请输入SIM卡号" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="IMSI号" prop="imsiNo" class="form-w-95" :colon="false">
              <a-input style="width:278px;" v-model.trim="data.imsiNo" placeholder="请输入IMSI号" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="最晚激活日期" prop="latestActivationTime" :colon="false">
              <a-date-picker v-model="data.latestActivationTime" format="YYYY-MM-DD" style="width:278px;"
                @change="onChangeTime1" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="总流量" prop="totalFlow" class="form-w-95" :colon="false">
              <a-input style="width:278px;" v-model.trim="data.totalFlow" placeholder="请输入总流量" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="厂家发货时间" prop="factoryDeliveryTime" :colon="false">
              <a-date-picker v-model="data.factoryDeliveryTime" format="YYYY-MM-DD" style="width:278px;"
                @change="onChangeTime2" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="骑圈发货时间" prop="qqDeliveryTime" :colon="false">
              <a-date-picker v-model="data.qqDeliveryTime" format="YYYY-MM-DD" style="width:278px;"
                @change="onChangeTime3" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="批次号" prop="batchNo" class="form-w-95" :colon="false">
              <a-input style="width:278px;" v-model.trim="data.batchNo" placeholder="请输入批次号" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="MAC" prop="macNo" class="form-w-95" :colon="false">
              <a-input style="width:278px;" v-model.trim="data.macNo" placeholder="请输入MAC" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-button type="primary" style="margin-left: 100px;" @click="handleOk">
              确定
            </a-button>
          </a-col>
        </a-form-model>

      </a-row>
    </div>

  </div>

</template>

<script>
import modalHeader from '@/components/modal-header'
import { deviceList, addDeviceStore, deviceStoreDetail, deviceStoreEdit } from '@/services/deviceManament'
import { brandAllGet } from '@/services/vehicleStore'
export default {
  components: {
    modalHeader
  },
  data () {
    return {
      flag: false,
      id: null,
      type: 1,
      brandOptions: [],
      deviceOptions: [],
      title: '新增设备',
      data: {

      },
      rules: {
        deviceNo: [{ required: true, message: '请输入设备号', trigger: 'blur' }],
        iccid: [{ required: true, message: '请输入iccid', trigger: 'blur' }],
        brandId: [{ required: true, message: '请选择设备品牌', trigger: 'change' }],
        modelId: [{ required: true, message: '请选择设备型号', trigger: 'change' }],
        snNo: [{ required: true, message: '请输入sn号', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getBrandAllGet()
  },
  methods: {
    handleOk () {
      this.$refs.ruleForm.validate((val) => {
        if (val) {
          if (this.type === 1) {
            this.addDeviceStore()
          } else {
            this.editDeviceStore()
          }
        }
      })
    },
    async addDeviceStore () {
      const res = await addDeviceStore(this.data)
      if (res.isSuccess) {
        this.$message.newFun('新增成功', 'success', 3)
        this.close()
      } else {
        this.$message.newFun(res.msg, 'error', 3)
      }
    },
    async editDeviceStore () {
      const res = await deviceStoreEdit(this.id, this.data)
      if (res.isSuccess) {
        this.$message.newFun('编辑成功', 'success', 3)
        this.close()
      } else {
        this.$message.newFun(res.msg, 'error', 3)
      }
    },
    async getDetail () {
      const res = await deviceStoreDetail(this.id)
      if (res.isSuccess) {
        this.data = res.data
        this.getAllDeviceList(res.data.brandId)
      } else {
        this.$message.newFun(res.msg, 'error', 3)
      }
    },
    onChangeTime1 (date, dateString) {
      this.data.latestActivationTime = dateString
    },
    onChangeTime2 (date, dateString) {
      this.data.factoryDeliveryTime = dateString
    },
    onChangeTime3 (date, dateString) {
      this.data.qqDeliveryTime = dateString
    },
    changeDevice (values) {
      if (values) {
        this.getAllDeviceList(values)
      } else {
        this.deviceOptions = []
      }
    },
    async getBrandAllGet () {
      const res = await brandAllGet({ type: 4 })
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        this.brandOptions = response
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getAllDeviceList (brandId) {
      const res = await deviceList({ brandId, status: 1 })
      if (res.isSuccess) {
        this.deviceOptions = res.data
      } else {
        this.$message.newFun(res.msg, 'error', 2)
      }
    },
    close () {
      this.$emit('close')
    },
    open (record) {
      this.type = record.type
      if (record.type === 1) {
        this.title = '新增设备'
      } else {
        this.title = '编辑设备'
        this.id = record.id
        this.flag = true
        this.getDetail()
      }
    }
  }
}
</script>
